<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="loginFormRules">
      <el-input v-model="loginForm.level" type="hidden"></el-input>
      <el-form-item label="昵称" prop="username">
        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" autofocus></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
      </el-form-item>
      <el-form-item class="pwdAbout">
        <el-checkbox label="记住密码" name="type" v-model="remPwd"></el-checkbox>
        <!-- <a href="#" class="forgetPwd">忘记密码？</a> -->
      </el-form-item>
    </el-form>
    <!--按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="login()">登录</el-button>
      <el-button @click="reset()">重置</el-button>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 数据绑定
      loginForm: {
        level: '',
        username: '',
        password: ''
      },
      remPwd: false,
      // 表单验证
      loginFormRules: {
        username: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { min: 1, max: 15, message: '1-15个字符', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  props: ['level'],
  watch: {
    'loginForm.username': function(val) {
      if (window.localStorage.getItem(val)) {
        this.loginForm.password = window.localStorage.getItem(val)
        this.remPwd = true
      }
    }
  },
  methods: {
    // 登录
    login() {
      // 预验证valid返回boolean
      this.$refs.loginForm.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        this.loginForm.level = this.level
        const res = await this.$http.post('/login', this.loginForm)
        // console.log(res)
        if (res.meta.status !== 200) {
          this.loginForm.password = ''
          return this.$Message.error('账号或密码错误')
        }
        // 记住密码后添加到localStorage
        if (this.remPwd) {
          window.localStorage.setItem(
            this.loginForm.username,
            this.loginForm.password
          )
        } else {
          // 移除
          window.localStorage.removeItem(this.loginForm.username)
        }
        // 将token添加进 sessionStorage
        window.sessionStorage.setItem('token', res.token)
        // 将登录状态添加到sessionStorage
        window.sessionStorage.setItem('login', this.loginForm.username)
        if (this.level) {
          this.$router.push({
            name: '/suphome',
            params: {
              username: this.loginForm.username
            }
          })
        } else {
          this.$router.push({
            name: '/home',
            params: {
              username: this.loginForm.username
            }
          })
        }
      })
    },
    // 重置
    reset() {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-items: center;
  .el-button {
    margin: 0 auto;
  }
}
.el-form {
  .el-form-item {
    margin: 25px 25px 0 0;
  }
  .pwdAbout {
    .forgetPwd {
      position: absolute;
      top: 0;
      right: 0;
      text-decoration: none;
      color: red;
    }
  }
}
</style>
